import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/extensions/ex_widget.dart';
import 'package:life_service/route/index.dart';
import 'package:life_service/utils/styles.dart';
import 'package:life_service/utils/tools.dart';

import 'controller.dart';

class SearchAddressPage extends GetView<SearchAddressController> {
  const SearchAddressPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: HexColor(HexColor.colorF2f2),
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: IconButton(
          onPressed: Get.back,
          icon: Icon(
            CupertinoIcons.chevron_back,
            size: 20,
            color: HexColor(HexColor.color3333),
          ),
        ),
        title: TextField(
          style: StylesUtils.customTextStyle(
            color: HexColor.color3333,
          ),
          decoration: InputDecoration(
            constraints: const BoxConstraints.expand(width: 290, height: 36),
            prefixIconConstraints:
                const BoxConstraints.expand(width: 40, height: 36),
            prefixIcon: IconButton(
              onPressed: () {},
              icon: Icon(
                CupertinoIcons.search,
                size: 18,
                color: HexColor(HexColor.color9999),
              ),
            ),
            suffixIconConstraints:
                const BoxConstraints.expand(width: 40, height: 36),
            suffixIcon: IconButton(
              onPressed: () {},
              icon: Icon(
                CupertinoIcons.xmark_circle_fill,
                size: 16,
                color: HexColor(HexColor.color9999),
              ),
            ),
            filled: true,
            fillColor: HexColor(HexColor.colorF7f7),
            hintText: '搜索酒店/地名/关键词',
            hintStyle: StylesUtils.customTextStyle(
              color: HexColor.color9999,
              fontSize: StylesUtils.fontSize13,
            ),
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
                borderSide: BorderSide.none),
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
                borderSide: BorderSide.none),
            enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
                borderSide: BorderSide.none),
            isCollapsed: true,
            isDense: true,
            contentPadding: const EdgeInsets.only(top: 12, left: 15),
          ),
          onSubmitted: (String keyword) {},
          onChanged: (String query) {},
          onTap: () {},
          textInputAction: TextInputAction.search,
          onTapOutside: (event) {},
        ),
        actions: [
          TextButton(
            onPressed: () {},
            child: Text(
              '取消',
              style: StylesUtils.customTextStyle(
                color: HexColor.color9999,
              ),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: (Get.width - 328) / 2),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.only(top: 15),
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  children: [
                    WidgetSpan(
                      child: ToolsUtils.image(
                        'history_u2001.png',
                        width: 18,
                        height: 16,
                        fit: BoxFit.fill,
                      ),
                      alignment: PlaceholderAlignment.middle,
                    ),
                    TextSpan(
                      text: '  历史记录',
                      style: StylesUtils.customTextStyle(
                          color: HexColor.color3333),
                    ),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 15, bottom: 20),
              child: StaggeredGrid.count(
                crossAxisCount: 4,
                children: controller.scenery
                    .map(
                      (str) => Container(
                        height: 42,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          border: Border(
                            right: BorderSide(
                              color: HexColor.hex(HexColor.colorF2f2),
                            ),
                          ),
                        ),
                        child: Text(
                          str,
                          style: StylesUtils.customTextStyle(
                            color: HexColor.color3333,
                            fontSize: StylesUtils.fontSize12,
                          ),
                        ),
                      ).onTap(() {
                        Get.toNamed(Routes.hotelList);
                      }),
                    )
                    .toList(),
              ),
            ),
            Container(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  children: [
                    WidgetSpan(
                      child: ToolsUtils.image(
                        'u2009.png',
                        width: 18,
                        height: 16,
                        fit: BoxFit.fill,
                      ),
                      alignment: PlaceholderAlignment.middle,
                    ),
                    TextSpan(
                      text: '  机场车站',
                      style: StylesUtils.customTextStyle(
                          color: HexColor.color3333),
                    ),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 15, bottom: 20),
              child: StaggeredGrid.count(
                crossAxisCount: 4,
                children: controller.airport
                    .map(
                      (str) => Container(
                        height: 42,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          border: Border(
                            right: BorderSide(
                              color: HexColor.hex(HexColor.colorF2f2),
                            ),
                          ),
                        ),
                        child: Text(
                          str,
                          style: StylesUtils.customTextStyle(
                            color: HexColor.color3333,
                            fontSize: StylesUtils.fontSize12,
                          ),
                        ),
                      ),
                    )
                    .toList(),
              ),
            ),
            Container(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  children: [
                    WidgetSpan(
                      child: ToolsUtils.image(
                        'u2017.png',
                        width: 18,
                        height: 16,
                        fit: BoxFit.fill,
                      ),
                      alignment: PlaceholderAlignment.middle,
                    ),
                    TextSpan(
                      text: '  景点',
                      style: StylesUtils.customTextStyle(
                          color: HexColor.color3333),
                    ),
                  ],
                ),
              ),
            ),
            Table(
              children: [
                for (var i = 0; i < 2; i++)
                  TableRow(
                    children: [
                      for (var i = 0; i < 4; i++)
                        TableCell(
                          child: Container(
                            height: 42,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              border: Border(
                                bottom: BorderSide(
                                  color: HexColor(HexColor.colorF2f2),
                                ),
                                right: BorderSide(
                                  color: HexColor(HexColor.colorF2f2),
                                ),
                              ),
                            ),
                            child: Text(
                              '景点名称',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
              ],
              defaultVerticalAlignment: TableCellVerticalAlignment.middle,
              defaultColumnWidth: const FlexColumnWidth(),
            ).paddingOnly(top: 15, bottom: 20),
            Container(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  children: [
                    WidgetSpan(
                      child: ToolsUtils.image(
                        'u2029.png',
                        width: 18,
                        height: 16,
                        fit: BoxFit.fill,
                      ),
                      alignment: PlaceholderAlignment.middle,
                    ),
                    TextSpan(
                      text: '  商圈',
                      style: StylesUtils.customTextStyle(
                          color: HexColor.color3333),
                    ),
                  ],
                ),
              ),
            ),
            Table(
              children: [
                for (var i = 0; i < 2; i++)
                  TableRow(
                    children: [
                      for (var i = 0; i < 4; i++)
                        TableCell(
                          child: Container(
                            height: 42,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              border: Border(
                                bottom: BorderSide(
                                  color: HexColor(HexColor.colorF2f2),
                                ),
                                right: BorderSide(
                                  color: HexColor(HexColor.colorF2f2),
                                ),
                              ),
                            ),
                            child: Text(
                              '商圈名称',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
              ],
              defaultVerticalAlignment: TableCellVerticalAlignment.middle,
              defaultColumnWidth: const FlexColumnWidth(),
            ).paddingOnly(top: 15, bottom: 20),
            Container(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  children: [
                    WidgetSpan(
                      child: ToolsUtils.image(
                        'u2041.png',
                        width: 18,
                        height: 16,
                        fit: BoxFit.fill,
                      ),
                      alignment: PlaceholderAlignment.middle,
                    ),
                    TextSpan(
                      text: '  品牌酒店',
                      style: StylesUtils.customTextStyle(
                          color: HexColor.color3333),
                    ),
                  ],
                ),
              ),
            ),
            Table(
              children: [
                for (var i = 0; i < 2; i++)
                  TableRow(
                    children: [
                      for (var i = 0; i < 4; i++)
                        TableCell(
                          child: Container(
                            height: 42,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              border: Border(
                                bottom: BorderSide(
                                  color: HexColor(HexColor.colorF2f2),
                                ),
                                right: BorderSide(
                                  color: HexColor(HexColor.colorF2f2),
                                ),
                              ),
                            ),
                            child: Text(
                              '商圈名称',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
              ],
              defaultVerticalAlignment: TableCellVerticalAlignment.middle,
              defaultColumnWidth: const FlexColumnWidth(),
            ).paddingOnly(top: 15, bottom: 20),
            Container(
              alignment: Alignment.centerLeft,
              child: Text.rich(
                TextSpan(
                  children: [
                    WidgetSpan(
                      child: ToolsUtils.image(
                        'u2053.png',
                        width: 18,
                        height: 16,
                        fit: BoxFit.fill,
                      ),
                      alignment: PlaceholderAlignment.middle,
                    ),
                    TextSpan(
                      text: '  设施服务',
                      style: StylesUtils.customTextStyle(
                          color: HexColor.color3333),
                    ),
                  ],
                ),
              ),
            ),
            Table(
              children: [
                for (var i = 0; i < 1; i++)
                  TableRow(
                    children: [
                      for (var i = 0; i < 4; i++)
                        TableCell(
                          child: Container(
                            height: 42,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              border: Border(
                                bottom: BorderSide(
                                  color: HexColor(HexColor.colorF2f2),
                                ),
                                right: BorderSide(
                                  color: HexColor(HexColor.colorF2f2),
                                ),
                              ),
                            ),
                            child: Text(
                              '服务名称',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12,
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
              ],
              defaultVerticalAlignment: TableCellVerticalAlignment.middle,
              defaultColumnWidth: const FlexColumnWidth(),
            ).paddingOnly(top: 15, bottom: 20),
          ],
        ),
      ),
    );
  }
}
